<!--
 * @Description:
 * @Author: zhailei
 * @Date: 2021-08-31 10:08:14
 * @LastEditTime: 2021-08-31 14:13:15
 * 
 * @FilePath: \vite-demoe:\wwwroot\Vue\\-cloud-vue\src\layouts\header\headerLock.vue
-->
<template>
  <div
    style="width: 76px;padding: 0px;vertical-align: middle;text-align:center;height: 100%;"
  >
    <span @click="handleLock()">
      <a-icon :class="['header-notice-icon']" type="lock" />
      <span class="text">锁屏</span>
    </span>
    <!--<a-icon type="lock"/>-->
    <t-modal
      title="锁屏"
      :visible.sync="box"
      width="500px"
      append-to-body
      @ok="handleSetLock"
      @cancel="
        () => {
          box = false;
          password = '';
        }
      "
    >
      <a-form ref="form" :form="form" laba-width="80px">
        <a-form-item
          label="锁屏密码"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input-password
            v-model="password"
            placeholder="请输入锁屏密码"
            :allowClear="true"
          ></a-input-password>
          <span style="color: red"
            >注意:锁屏密码为空默认使用当前登录账号的密码</span
          >
        </a-form-item>
      </a-form>
    </t-modal>
  </div>
</template>

<script>
// import { validatenull } from "@/util/validate";
import { mapGetters, mapActions } from "vuex";

export default {
  name: "top-lock",
  props: {
    text: String,
  },
  data() {
    return {
      box: false,
      form: this.$form.createForm(this),
      labelCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 6,
        },
      },
      wrapperCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 16,
        },
      },
      password: "",
    };
  },
  created() {},
  mounted() {},
  computed: {},
  methods: {
    handleSetLock() {
      let lockPasswd = "";
      if (this.password) {
        lockPasswd = this.$md5(this.password); // 对密码进行加密
      }
      localStorage.setItem("lockPasswd", lockPasswd);
      localStorage.setItem("isLock", "true");
      setTimeout(() => {
        history.pushState(null, null, document.URL);
        this.$router.push({ path: "/lock" });
      }, 100);
      this.password = "";
    },
    handleLock() {
      this.box = true;
    },
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.text {
  margin-left: 6px;
  font-size: 14px;
  color: #666666;
}
.header-notice-icon {
  font-size: 16px;
  color: #1890ff;
}
</style>
